'use client'
import React, { useEffect, useState } from 'react'
import axios from 'axios'
import columnshome from './Cloutshome'
import { Button, Space, Table } from 'antd'
export default function page() {
  const [datavale,setvalue]=useState([])
  const [overname,setovername]=useState('')
  const [currentTime, setCurrentTime] = useState(new Date())
  const [currentDate, setCurrentDate] = useState(new Date())
  const [countdown, setCountdown] = useState(60) 
  
    // 定期更新当前时间和日期
    useEffect(() => {
      const timeInterval = setInterval(async() => {
        await axios.get('/api').then(res=>{
          setvalue(res.data)
          setovername("全部业主数据")
        })
        .catch(err=>{
          console.error(err)
          setvalue(
            [{"name":"获取服务器失败",}
            ]
          );
        
        })

      }, 60000)
      return () => clearInterval(timeInterval)
    }, [])



  const linsubmit=()=>{
    setovername('linwenyuan业主信息')
    axios.get('/api/linwenyuan').then(res=>{
      setvalue(res.data)
    }).catch(err=>{
      console.error(err)
      setvalue(
        [{"name":"获取linwenyuan数据失败",}
        ]
      );
    });
  }
  const haixiansubmit=()=>{
    setovername('海鲜业主信息')
    axios.get('/api/haixian').then(res=>{
      setvalue(res.data)
    }).catch(err=>{
      console.error(err)
      setvalue(
        [{"name":"获取haxian数据失败",}
        ]
      );
    });
  }
  const relad=()=>{
    window.location.reload();
  }

     // 定期更新当前时间和日期
  useEffect(() => {
    const timeInterval = setInterval(() => {
      setCurrentTime(new Date())
      setCurrentDate(new Date())
    }, 1000)
    return () => clearInterval(timeInterval)
  }, [])

  // 倒计时逻辑
  useEffect(() => {
    if (countdown > 0) {
      const timer = setTimeout(() => {
        setCountdown(countdown - 1)
      }, 1000)
      return () => clearTimeout(timer)
    } else {
      setCountdown(60) // 重置倒计时
    }
  }, [countdown])
  return (
    <div>
      <div style={{marginTop:"25px"}}>
        
        <h1 style={{textAlign:"center"}}>第五城信息 </h1></div>
     
      <div style={{marginTop:"15px"}}>
      <Space>
        <Button type="primary" onClick={linsubmit}>linwenyuan</Button>
     <Button type="primary" onClick={haixiansubmit}>海鲜</Button>
     <Button type="primary" onClick={relad}>自动刷新</Button>
     <h2 style={{ textAlign: "center",marginLeft:"49px" }}>当前日期时间:{currentDate.toLocaleDateString()} {currentTime.toLocaleTimeString()}</h2>
    <h1 style={{marginLeft:"49px"}} >距离下一次获取数据还有{countdown}秒</h1>
      </Space>
      </div>
      <div>
     <h1 style={{textAlign:"center",marginTop:"10px"}}> {overname}</h1>  
      </div>
      <div style={{marginTop:"10px"}}>
        <Table columns={columnshome} dataSource={datavale}></Table>
      </div>
    </div>
  )
}
